// When the DOM has loaded
$(document).ready(function() {

Crafty.init(640,480).canvas.init();
  Crafty.background("black");

  var player1 = Crafty.e("2D, Canvas, Color")
          .color("red")
          .attr({w:50, h:50});



  var player2 = Crafty.e("2D, Canvas, Color")
          .color("green")
          .attr({w:50, h:50, x: 50, y:50});
  
  
  
  // Create circular element
  Crafty.c("CircularShape", {
    init: function() {
      this.requires("2D, DOM");
      var strokew = 1;
      var pen     = new jxPen(new jxColor("white"), strokew);
      var brush   = new jxBrush(new jxColor("red"));
      var center  = new jxPoint(this._w / 2, this._h / 2);
      var radius  = (this._w / 2) - strokew;
      var circle  = new jxCircle(center, radius, pen, brush);
      circle.draw(new jxGraphics(this._element));
      return this;
    },
  });
  
  Crafty.e("CircularShape")
  .attr({w:100, h:100, x: 100, y:100});

  /* Collision Code */
  player1.addComponent("Collision").bind('Moved', function(from) {
    if(this.hit('2D')) {
       this.attr({x: from.x, y:from.y});
    }
  });
  player2.addComponent("Collision").bind('Moved', function(from) {
    if(this.hit('2D')) {
       this.attr({x: from.x, y:from.y});
    }
  });


  var centerX = player1._x,
  centerY = player1._y,
  radius = 100;

  new Crafty.circle(centerX, centerY, radius);
  
  player1.addComponent("Multiway").multiway(3,{ 
          W: -90, S: 90, D: 0, A: 180});

  player2.addComponent("Multiway").multiway(10,{ 
          UP_ARROW: -90, DOWN_ARROW: 90, 
          RIGHT_ARROW: 0, LEFT_ARROW: 180});
  
  
});